<template>
  <div class="ycf">
    <el-select v-model="value" placeholder="请选择孕次" size="small">
      <el-option label="测试" value="测试"> </el-option>
    </el-select>
    <span style="float: right;">
        <el-button
      type="primary"
      plain
      size="small"
      style="background-color: #fff; color: rgb(47, 160, 254)"
      >删除</el-button
    >
    <el-button
      type="primary"
      plain
      size="small"
      style="background-color: #fff; color: rgb(47, 160, 254)"
      >结案</el-button
    >
    </span>
    <p style="margin-top: 15px;">
        <span style="width: 20%;display: inline-block;">建册时间: 2022-10-15</span>
        <span style="width: 20%;display: inline-block;">建册医生: 和萍</span>
        <span style="width: 20%;display: inline-block;">末次月经日期: 2022-08-20</span>
        <span style="width: 20%;display: inline-block;">分娩孕周: 36周+6天</span>
        <span style="width: 20%;display: inline-block;">建册单位: 丽江市妇幼保健院</span>
    </p>
    <el-collapse
      v-model="activeNames"
      @change="handleChange"
      style="margin-top: 10px"
    >
      <el-collapse-item name="1">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px">第1次产前检查</span>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="最近更新时间">
            </el-table-column>
            <el-table-column prop="date" label="随访时间"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="随访项目"> </el-table-column>
            <el-table-column prop="date" label="随访照片"> </el-table-column>
            <el-table-column prop="date" label="报告单据"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px">第2次产前检查</span>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="最近更新时间">
            </el-table-column>
            <el-table-column prop="date" label="随访时间"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="随访项目"> </el-table-column>
            <el-table-column prop="date" label="随访照片"> </el-table-column>
            <el-table-column prop="date" label="报告单据"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px">第3次产前检查</span>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="最近更新时间">
            </el-table-column>
            <el-table-column prop="date" label="随访时间"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="随访项目"> </el-table-column>
            <el-table-column prop="date" label="随访照片"> </el-table-column>
            <el-table-column prop="date" label="报告单据"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px">第4次产前检查</span>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="最近更新时间">
            </el-table-column>
            <el-table-column prop="date" label="随访时间"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="随访项目"> </el-table-column>
            <el-table-column prop="date" label="随访照片"> </el-table-column>
            <el-table-column prop="date" label="报告单据"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="5">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px">第5次产前检查</span>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="最近更新时间">
            </el-table-column>
            <el-table-column prop="date" label="随访时间"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="随访项目"> </el-table-column>
            <el-table-column prop="date" label="随访照片"> </el-table-column>
            <el-table-column prop="date" label="报告单据"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="6">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px"
              >健康体检失访记录</span
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="最近更新时间">
            </el-table-column>
            <el-table-column prop="date" label="随访日期"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="随访进度"> </el-table-column>
            <el-table-column prop="date" label="随访照片"> </el-table-column>
            <el-table-column prop="date" label="报告单据"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 弹层开始 -->
    <el-dialog
      title="产前随访记录表"
      :visible.sync="dialogVisible"
      width="96%"
      style="margin-top: -10vh"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="height: 65vh; overflow: auto">
        <cqsfjlb></cqsfjlb>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 弹层结束 -->
  </div>
</template>
  
  <script>
import cqsfjlb from "@/views/dialog_info/cqsfjlb.vue"; // 产前随访记录表
export default {
  components: {
    cqsfjlb,
  },
  data() {
    return {
      activeNames: [],
      tableData: [{}],
      dialogVisible: false,
    };
  },
  methods: {
    handleChange(val) {
    },
    goto_open() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.ycf {
}
</style>